<!DOCTYPE >
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClustererPlus V3 Example</title>

    <style type="text/css">
      body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }

      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 800px;
      }

      #map {
        width: 800px;
        height: 400px;
      }

      #actions {
        list-style: none;
        padding: 0;
      }

      #inline-actions {
        padding-top: 10px;
      }

      .item {
        margin-left: 20px;
      }

      .custom-clustericon {
        background: var(--cluster-color);
        color: #fff;
        border-radius: 100%;
        font-weight: bold;
        font-size: 15px;
        display: flex;
        align-items: center;
      }

      .custom-clustericon::before,
      .custom-clustericon::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;

        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        background: var(--cluster-color);
        opacity: 0.2;
        border-radius: 100%;
      }

      .custom-clustericon::before {
        padding: 7px;
      }

      .custom-clustericon::after {
        padding: 14px;
      }

      .custom-clustericon-1 {
        --cluster-color: #00a2d3;
      }

      .custom-clustericon-2 {
        --cluster-color: #ff9b00;
      }

      .custom-clustericon-3 {
        --cluster-color: #ff6969;
      }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
    <script src="data.js" type="text/javascript"></script>
    <script
      src="../dist/markerclustererplus.min.js"
      type="text/javascript"
    ></script>

    <script type="text/javascript">
      var styles = [
        [
          MarkerClusterer.withDefaultStyle({
            width: 35,
            height: 35,
            url: "../images/people35.png",
            textColor: "#ff00ff",
            textSize: 10
          }),
          MarkerClusterer.withDefaultStyle({
            width: 45,
            height: 45,
            url: "../images/people45.png",
            textColor: "#ff0000",
            textSize: 11
          }),
          MarkerClusterer.withDefaultStyle({
            width: 55,
            height: 55,
            url: "../images/people55.png",
            textColor: "#ffffff",
            textSize: 12
          })
        ],
        [
          MarkerClusterer.withDefaultStyle({
            url: "../images/conv30.png",
            width: 30,
            height: 27,
            anchorText: [-3, 0],
            anchorIcon: [27, 28],
            textColor: "#ff00ff",
            textSize: 10
          }),
          MarkerClusterer.withDefaultStyle({
            url: "../images/conv40.png",
            width: 40,
            height: 36,
            anchorText: [-4, 0],
            anchorIcon: [36, 37],
            textColor: "#ff0000",
            textSize: 11
          }),
          MarkerClusterer.withDefaultStyle({
            url: "../images/conv50.png",
            width: 50,
            height: 45,
            anchorText: [-5, 0],
            anchorIcon: [45, 46],
            textColor: "#0000ff",
            textSize: 12
          })
        ],
        [
          MarkerClusterer.withDefaultStyle({
            url: "../images/heart30.png",
            width: 30,
            height: 26,
            anchorIcon: [26, 15],
            textColor: "#ff00ff",
            textSize: 10
          }),
          MarkerClusterer.withDefaultStyle({
            url: "../images/heart40.png",
            width: 40,
            height: 35,
            anchorIcon: [35, 20],
            textColor: "#ff0000",
            textSize: 11
          }),
          MarkerClusterer.withDefaultStyle({
            url: "../images/heart50.png",
            width: 50,
            height: 44,
            anchorIcon: [44, 25],
            textSize: 12
          })
        ],
        [
          {
            width: 30,
            height: 30,
            className: "custom-clustericon-1"
          },
          {
            width: 40,
            height: 40,
            className: "custom-clustericon-2"
          },
          {
            width: 50,
            height: 50,
            className: "custom-clustericon-3"
          }
        ]
      ];

      var markerClusterer = null;
      var map = null;
      var imageUrl =
        "https://chart.apis.google.com/chart?cht=mm&chs=24x32&" +
        "chco=FFFFFF,008CFF,000000&ext=.png";

      google.maps.event.addDomListener(window, "load", initialize);

      function refreshMap() {
        if (markerClusterer) {
          markerClusterer.clearMarkers();
        }

        var markers = [];

        var markerImage = new google.maps.MarkerImage(
          imageUrl,
          new google.maps.Size(24, 32)
        );

        for (var i = 0; i < 1000; ++i) {
          var latLng = new google.maps.LatLng(
            data.photos[i].latitude,
            data.photos[i].longitude
          );
          var marker = new google.maps.Marker({
            position: latLng,
            icon: markerImage
          });
          markers.push(marker);
        }

        var zoom = parseInt(document.getElementById("zoom").value, 10);
        var size = parseInt(document.getElementById("size").value, 10);
        var style = parseInt(document.getElementById("style").value, 10);
        zoom = zoom == -1 ? null : zoom;
        size = size == -1 ? null : size;
        style = style == -1 ? null : style;

        markerClusterer = new MarkerClusterer(map, markers, {
          maxZoom: zoom,
          gridSize: size,
          styles: styles[style],
          clusterClass: style === 3 ? "custom-clustericon" : undefined
        });
      }

      function initialize() {
        map = new google.maps.Map(document.getElementById("map"), {
          zoom: 2,
          center: new google.maps.LatLng(39.91, 116.38),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var refresh = document.getElementById("refresh");
        google.maps.event.addDomListener(refresh, "click", refreshMap);

        var clear = document.getElementById("clear");
        google.maps.event.addDomListener(clear, "click", clearClusters);

        refreshMap();
      }

      function clearClusters(e) {
        e.preventDefault();
        e.stopPropagation();
        markerClusterer.clearMarkers();
      }
    </script>
  </head>
  <body>
    <h3>An example of MarkerClustererPlus</h3>
    <div id="map-container">
      <div id="map"></div>
    </div>
    <div id="inline-actions">
      <span
        >Max zoom level:
        <select id="zoom">
          <option value="-1">Default</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
        </select>
      </span>
      <span class="item"
        >Cluster size:
        <select id="size">
          <option value="-1">Default</option>
          <option value="40">40</option>
          <option value="50">50</option>
          <option value="70">70</option>
          <option value="80">80</option>
        </select>
      </span>
      <span class="item"
        >Cluster style:
        <select id="style">
          <option value="-1">Default (img based)</option>
          <option value="0">People (img based)</option>
          <option value="1">Conversation (img based)</option>
          <option value="2">Heart (img based)</option>
          <option value="3">Circles (CSS only)</option>
        </select>
      </span>
      <input id="refresh" type="button" value="Refresh Map" class="item" />
      <a href="#" id="clear">Clear</a>
    </div>
  </body>
</html>
